/**
 * 轮播图实现
 * 1. 实现轮播效果
 * 2. 实现鼠标悬停关闭轮播效果
 * 3. 左右按钮能实现左右滑动
 * 4. 小点快速定位
 */

// 初始化图片数组
let imgs = [
    './images/img1.jpg',
    './images/img2.jpg',
    './images/img3.jpg',
    './images/img4.jpg',
    './images/img5.jpg',
    './images/img6.jpg'
]

// 获取图像标签对象
let img = document.querySelector('.slider>img');

/**
 *  变量curr用来记录当前轮播图片，对应图片数组的下标
 *  但是注意，代表当前图片的li小点是从1开始计数的
 */
let curr = 0;

/* -------------- 1. 实现轮播功能 --------------  */
// 定义轮播函数
let f = function() {
    if(++curr >= imgs.length) {
        curr = 0;
    }
    // 清除以往小点样式
    document.querySelector('.active').classList.remove('active');
    // 设置当前小点样式，由于是从1开始，所以curr要+1
    document.querySelector(`.slider-list li:nth-child(${curr+1})`).classList.add('active');
    //修改当前图片
    img.src = imgs[curr];
}

// 定时轮播
let slider = setInterval(f, 1500);

/* -------------- 2. 悬停关闭轮播 --------------  */
// 获取当前轮播图片对象
let currImg = document.querySelector('.slider>img');
// 当悬停时，清除定时函数
currImg.addEventListener('mouseenter', function(){
    clearInterval(slider);
})
// 当鼠标离开当前对象时，重新启动定时函数
currImg.addEventListener('mouseleave', function(){
    slider = setInterval(f, 1500);
})

/* -------------- 3. 左右按钮功能 --------------  */
// 右按钮：点击时立刻切换成下一张
let next = document.querySelector('.next');
next.addEventListener('click', function(){
    // +1操作
    if(++curr >= imgs.length){
        curr = 0;
    }
    //清除样式、设置新样式
    document.querySelector('.active').classList.remove('active');
    document.querySelector(`.slider-list li:nth-child(${curr+1})`).classList.add('active');
    //更换图片
    img.src = imgs[curr];
})

// 左按钮：点击时立刻回到上一张
let prev = document.querySelector('.prev');
prev.addEventListener('click', function(){
    // -1操作
    if(--curr < 0){
        curr = imgs.length-1; //5
    }
    //清除样式、设置新样式
    document.querySelector('.active').classList.remove('active');
    document.querySelector(`.slider-list li:nth-child(${curr+1})`).classList.add('active');
    //更换图片
    img.src = imgs[curr];
})

/* -------------- 4. 小点快速定位 --------------  */
// 获取全部小点数组对象
let all = document.querySelectorAll('.slider-list li');
// 给li小点全部添加点击事件
for(let i=0; i<all.length; i++) {
    all[i].addEventListener('click', function(){
        document.querySelector('.active').classList.remove('active');
        this.classList.add('active');
        // 更改图片
        img.src = imgs[i];
        // 4. 改变curr的值
        curr = i;
    })
}
